<template>
  <div class="wrap">
    <div class="w100 haed bbg">
      <img
        class="fl hpd pa"
        style="height: 40rem; left: 20rem; top: 7rem"
        src="@/assets/img/back.png"
        @click="back"
      />
      <p class="fz37 cfff hpd tc">评价管理</p>
    </div>
    <div class="list p20">
      <el-card class="box-card mb25" v-for="(c) in commentList" :key="c.id">
        <p class="fb">
          <span class="f30">{{ c.userName }}</span>
          <button class="br brs bbg cfff plr pt10 pb10" @click="toDetail(c.orderId,c)">
            查看详情
          </button>
        </p>
        <div class="line mt15 mb15"></div>
        <p class="lh c">订单编号:{{ c.orderCode }}</p>
        <p class="lh">
          综合评分：{{ c.star }}分
          <svg
            class="icon star active ml5"
            aria-hidden="true"
            v-for="item in c.star"
            :key="item"
          >
            <use xlink:href="#icon-star"></use>
          </svg>
        </p>
        <p class="lh c2">评价时间：{{ c.createdDate | formatDate }}</p>
      </el-card>
    </div>
  </div>
</template>

<script>
import "../../assets/js/iconfont";
import myFilter from  "../../assets/js/mixin";

import { evaluation } from "@/api/index";
export default {
  data() {
    return {
      score: 3,
      commentList: {},
      result:{
        time:'',
        score:'',
        commentContent:''
      }
    };
  },
  methods: {
    //跳转到详情页
    toDetail(orderId,item) {
      this.$router.push({
        path:'/orderDetail',
        query:{orderId,item}
      });
    },
    //返回上一页
    back() {
      this.$router.back();
    },
    
  },
  mixins:[myFilter],
  mounted() {
    evaluation().then((r) => {
        this.commentList = r.data.list;
    });
  },
};
</script>

<style scoped>
.wrap{font-size: 24rem;}
.list{margin-top: -300rem;}
.el-card{border-radius: 15rem;}
.fb{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
.line{height: 5rem;background-color: #f9f9f9;}
button{font-size: 24rem;border: none;}
.lh{line-height: 60rem;}
.c{color: rgb(78,125,190);}
.c2{color: #a2a2a2;}
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
.star{color:#cccccc}
.active{color: #fac909;}
</style>